<style>
    .step-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30px auto;
        width: 300px;
        position: relative;
    }

    .yuan-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
    }

    .yuan {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        border: 2px solid #9f9fa0;
        color: 9f9fa0;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        line-height: 16px;
    }

    .yuan-active {
        color: #ff0000;
    }

    .yuan-active .yuan {
        color: #ff0000;
        border: 2px solid #ff0000;

    }

    .basic-box {
        margin-left: 30px;
    }

    .heng {
        position: absolute;
        top: 10px;
        left: 44px;
        width: 213px;
        height: 2px;
        background-color: #9f9fa0;
    }

    .heng-active {
        background-color: #ff0000;
    }

    .basic-info-title {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        font-size: 16px;
        font-weight: bold;
    }

    .basic-info-title div {
        width: 4px;
        height: 23px;
        background-color: #ff0000;
        margin-right: 10px;
    }

    .basic-info-title span {
        font-size: 12px;
        margin-left: 15px;
    }

    .foot-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 53px;
    }

    .next-btn {
        width: 170px;
        height: 35px;
        border: none;
        font-size: 16px;
        color: #fff;
        margin: 0 auto;
        background-color: #ff0000;
    }

    .scheme-box {
        display: none;
        margin-left: 30px;
    }

    .scheme-item {
        width: 49%;
        display: inline-block
    }
</style>
<div class="main-box">
    <div class="step-box">
        <div class="yuan-box yuan-active">
            <div class="yuan ">1</div>
            基本信息
        </div>
        <div class="yuan-box">
            <div class="yuan">2</div>
            方案配置
        </div>
        <div class="heng"></div>
    </div>
    <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <div class="basic-box">
            <div class="basic-info-title">
                <div></div>
                基本信息
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-name" placeholder="请输入方案名称" class="form-control" name="row[name]" type="text">
                </div>
            </div>

            <div class="form-group foot-btn">
                <button type="button" class="next-btn">下一步</button>
            </div>
        </div>
        <div class="scheme-box">
            <div class="scheme-item">
                <div class="basic-info-title">
                    <div></div>
                    销售业绩 <span>默认针对所有商品生效</span>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Shop_id')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-shop_id" data-rule="required" data-source="wanlshop/shop/index"
                            data-field="shopname" class="form-control selectpage" name="row[shop_id]" type="text"
                            value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Staff_ids')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-staff_ids" data-rule="required" data-source="staff/staff/index"
                            data-multiple="true" class="form-control selectpage" name="row[staff_ids]" type="text"
                            value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
                    <div class="col-xs-12 col-sm-8">

                        <div class="radio">
                            {foreach name="statusList" item="vo"}
                            <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]"
                                    type="radio" value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Gtype')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="gtypeList" item="vo"}
                            <label for="row[gtype]-{$key}"><input id="row[gtype]-{$key}" name="row[gtype]" type="radio"
                                    value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Ftype')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="ftypeList" item="vo"}
                            <label for="row[ftype]-{$key}"><input id="row[ftype]-{$key}" name="row[ftype]" type="radio"
                                    value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('I1type')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="i1typeList" item="vo"}
                            <label for="row[i1type]-{$key}"><input id="row[i1type]-{$key}" name="row[i1type]"
                                    type="radio" value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('I2type')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="i2typeList" item="vo"}
                            <label for="row[i2type]-{$key}"><input id="row[i2type]-{$key}" name="row[i2type]"
                                    type="radio" value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('I3type')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="i3typeList" item="vo"}
                            <label for="row[i3type]-{$key}"><input id="row[i3type]-{$key}" name="row[i3type]"
                                    type="radio" value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Sku_ids')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-sku_ids" data-rule="required" data-source="wanlshop/goods/index" data-field="title"
                            data-multiple="true" class="form-control selectpage" name="row[sku_ids]" type="text"
                            value="">
                    </div>
                </div>
            </div>
            <div class="scheme-item">
                <div class="basic-info-title">
                    <div></div>
                    消耗业绩 <span>默认针对所有商品生效</span>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Di1type')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="di1typeList" item="vo"}
                            <label for="row[di1type]-{$key}"><input id="row[di1type]-{$key}" name="row[di1type]"
                                    type="radio" value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Di2type')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="radio">
                            {foreach name="di2typeList" item="vo"}
                            <label for="row[di2type]-{$key}"><input id="row[di2type]-{$key}" name="row[di2type]"
                                    type="radio" value="{$key}" {in name="key" value="0" }checked{/in} /> {$vo}</label>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Sku1_ids')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-sku1_ids" data-rule="required" data-source="wanlshop/goods/index"
                            data-field="title" data-multiple="true" class="form-control selectpage" name="row[sku1_ids]"
                            type="text" value="">
                    </div>
                </div>
            </div>
            <div class="form-group foot-btn">
                <button type="submit" class="next-btn">保存信息</button>
            </div>
        </div>
    </form>
</div>